<template>
  <div class="container">
      <div class="main-content">
     <swiper class="swiper" indicator-dots="true" indicator-color="rgba(0, 0, 0, 0.3)"
      indicator-active-color="white" autoplay="true" circular="true"
       interval="2000" previous-margin="0px" next-margin="0px"> 
         <block v-for="(item, index) in list" :index="index" :key="key">
             <swiper-item>
                 <image :src="item.url" style="width: 100%; height: 100%;"/>
             </swiper-item>
         </block>
      </swiper>
      <div style="display: flex; flex-direction: column; align-items: center; background: white; height: 346rpx;">
          <img src="http://pe9eiblf9.bkt.clouddn.com/bxth1.jpg" alt="" style="margin-top: 32rpx; width: 96rpx; height: 96rpx;" />
        <div style="margin-top: 26rpx; font-size: 42rpx;">
          {{name}}
          </div>
        <div style="margin-top:16rpx; font-size: 28rpx; color: #979797; display: flex;  justify-content: center; align-items: center;">
                    <div style="display: flex; align-items: center;">
            <img style="height: 36rpx; width: 36rpx;" src="/static/location.png">
          </div>
          <div>通湖路158号星湖广场</div>
          </div>
        <div style="color: #979797; margin-top: 14rpx; font-size: 28rpx;">人均¥88047</div>
      </div>
      <div style="margin-top:10px; background: white; padding-top:26rpx;">
        <div style="margin-left: 30rpx; margin-right: 30rpx;">宴会厅(13)</div>
          <ul>
              <li v-for="(item, index) in items" :index="index" :key="key">
                  <div style="height: 180rpx; display: flex; align-items: center;" @click="goToHall"> 
                      <img :src="item.image" alt="" style="height: 134rpx; width: 180rpx; margin-left: 30rpx;" />
                      <div style="display:flex; flex-direction: column; margin-left: 14rpx; justify-content: space-between; height: 134rpx; width: 45%;">
                        <div style="font-weight: bold;">{{item.name}}</div>
                        <div style="color: #333; font-size: 28rpx;">{{item.count}}</div>
                        <div style="color: #999; font-size: 28rpx;">{{item.height}}</div>
                      </div>
                      <div style="height: 70rpx; background: #FE6630; width: 20.5%; border-radius: 6rpx;" @click.stop="goBooking">
                          <span style="line-height: 70rpx; font-size: 30rpx; display: inline-block; color: white; text-align: center; width: 100%;">查看档期</span>
                      </div>
                  </div>
              </li>
          </ul>
          <div style="height: 88rpx; text-align: center; line-height: 88rpx; border-top: 1rpx solid #e0e0e0; display: flex; justify-content: center; align-items: center;" @click="moreHall">
            <div style="height: 100%;">{{itemButtonName}}</div>
            <div style="margin-left: 8rpx; display: flex; align-items: center;">
              <img style="height: 30rpx; width: 30rpx;" :src="hallImage">
            </div>
            </div>
      </div>
      <div style="margin-top:20rpx; background: white; padding-top:26rpx;">
                <div style="margin-left: 30rpx; margin-right: 30rpx;">精选菜单</div>
          <ul>
              <li v-for="(menu, index) in menus" :index="index" :key="key">
                  <div style="height: 180rpx; display: flex; align-items: center;" @click="goMenu"> 
                      <img src="http://pe9eiblf9.bkt.clouddn.com/ct1.jpg" alt="" style="height: 134rpx; width: 180rpx; margin-left: 30rpx;" />
                      <div style="display:flex; flex-direction: column; margin-left: 14rpx; justify-content: space-between; height: 134rpx;">
                  <div style="font-weight: bold; color: #666;">{{menu.name}}</div>
                  <div style="color: #333; font-size: 28rpx;">
                    <span style="color: #ff6634; font-size: 24rpx;">¥ </span>
                    <span style="color: #ff6634; font-size: 36rpx; font-weight: bold;">{{menu.price}}</span>
                    <span> 元/桌</span>
                      </div>
                  <div style="color: #333; font-size: 28rpx;">含{{menu.count}}份菜单</div>
                      </div>
                  </div>
              </li>
          </ul>
          <div style="height: 88rpx; text-align: center; line-height: 88rpx; border-top: 1rpx solid #e0e0e0; display: flex; justify-content: center; align-items: center;" @click="moreMenu">
            <div style="height: 100%;">{{menuButtonName}}</div>
            <div style="margin-left: 8rpx; display: flex; align-items: center;">
              <img style="height: 30rpx; width: 30rpx;" :src="menuImage">
            </div>
            </div>
      </div>
      <div class="last">
        <div style="margin-left: 30rpx; margin-top: 30rpx;">商户信息</div>
        <div style="margin-left: 30rpx; margin-bottom: 30rpx;">营业时间：周一至周日 全天</div>
      </div>
      </div>
      <footer>
        <div class="call-item">
          <div style="height: 44rpx; width: 44rpx;">
            <img src="/static/call.png" style="width: 100%; height: 100%;">
          </div>
          
          <div style="color: #666; font-size: 24rpx;" >电话</div>
      </div>
        <div style="background: #fe6630; width: 75%; color: white; text-align: center; height: 80rpx; line-height: 80rpx; margin-left: 30rpx; border-radius: 6rpx;" @click="tapToBooking">预约看店</div>
      </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {url: 'http://pe9eiblf9.bkt.clouddn.com/banner1.jpg'},
        {url: 'http://pe9eiblf9.bkt.clouddn.com/banner2.jpg'},
        {url: 'http://pe9eiblf9.bkt.clouddn.com/banner3.jpg'},
        {url: 'http://pe9eiblf9.bkt.clouddn.com/banner4.jpg'},
        {url: 'http://pe9eiblf9.bkt.clouddn.com/banner5.jpg'},
        {url: 'http://pe9eiblf9.bkt.clouddn.com/banner6.jpg'}
      ],
      items: [
        {
          name: '花园之梦厅',
          count: '6~30桌',
          height: '层高 5m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/hyzm1.jpg'
        },
        {
          name: '水晶之恋厅',
          count: '6~30桌',
          height: '层高 5m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/sjzl1.jpg'
        },
        {
          name: '银河星辰厅',
          count: '6~33桌',
          height: '层高 7m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/yhxc1.jpg'
        }
      ],
      menus: [
        {
          name: '百年好合宴',
          price: '3888',
          count: '1'
        },
        {
          name: '浓情蜜意宴',
          price: '4888',
          count: '1'
        },
        {
          name: '喜结良缘宴',
          price: '5888',
          count: '1'
        }
      ],
      moreItems: [
        {
          name: '天幕巨影厅',
          count: '6~23桌',
          height: '层高 7m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/tmjy1.jpg'
        },
        {
          name: '湖光月夜厅',
          count: '6~32桌',
          height: '层高 7m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/hgyy1.jpg'
        },
        {
          name: '天空之城厅',
          count: '20~60桌',
          height: '层高 7m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/tkzc1.jpg'
        },
        {
          name: '长笛音乐厅',
          count: '6~39桌',
          height: '层高 7m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/cdyy1.jpg'
        },
        {
          name: '塞纳仪式厅',
          count: '10~10桌',
          height: '层高 8m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/snys1.jpg'
        },
        {
          name: '游艇婚礼',
          count: '10~10桌',
          height: '层高 1000m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/ythl1.jpg'
        },
        {
          name: '露台花园',
          count: '10~10桌',
          height: '层高 1000m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/lthy1.jpg'
        },
        {
          name: '草坪仪式',
          count: '30~120桌',
          height: '层高 1000m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/cpys1.jpg'
        },
        {
          name: '仪式堂',
          count: '6~30桌子',
          height: '层高 5m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/yst1.jpg'
        },
        {
          name: '秘密花园厅',
          count: '6~30桌子',
          height: '层高 5m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/mmhy1.jpg'
        },
        {
          name: '冰雪童话厅',
          count: '6~30桌子',
          height: '层高 5m | 无柱',
          image: 'http://pe9eiblf9.bkt.clouddn.com/bxth1.jpg'
        }
      ],
      moreMenus: [
        {
          name: '如意吉祥宴',
          price: '6888',
          count: '1'
        },
        {
          name: '龙凤呈祥宴',
          price: '7888',
          count: '1'
        }
      ],
      name: '华盛外滩22号·宴会厅(湖州店)',
      itemButtonName: '更多10个宴会厅',
      menuButtonName: '更多2菜单',
      hallImage: '/static/arrow_down.png',
      menuImage: '/static/arrow_down.png'
    }
  },
  methods: {
    moreHall () {
      if (this.items.length !== 3) {
        this.itemButtonName = '更多10个宴会厅'
        this.items.splice(3, this.items.length - 3)
        this.hallImage = '/static/arrow_down.png'
      } else {
        this.itemButtonName = '收起'
        this.items = this.items.concat(this.moreItems)
        this.hallImage = '/static/arrow_up.png'
      }
    },
    moreMenu () {
      if (this.menus.length !== 3) {
        this.menuButtonName = '更多2菜单'
        this.menus.splice(3, this.menus.length - 3)
        this.menuImage = '/static/arrow_down.png'
      } else {
        this.menuButtonName = '收起'
        this.menus = this.menus.concat(this.moreMenus)
        this.menuImage = '/static/arrow_up.png'
      }
    },
    goToHall () {
      const url = '../../pages/hall/main'
      wx.navigateTo({url})
    },
    goMenu () {
      const url = '../../pages/menu/main'
      wx.navigateTo({url})
    },
    goBooking () {
      const url = '../../pages/book/main'
      wx.navigateTo({url})
    },
    tapToBooking () {
      wx.request({
        url: 'http://192.168.1.51:8083/wt/add',
        data: {
          'phone': '18817501913',
          'schedule': '2018年11月'
        },
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          console.log(res.data)
        }
      })
    }
  }
}
</script>

<style scoped>

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-content {
    background: #f5f5f5;
    flex: 1;
}

footer {
    display: flex;
    position: fixed;
    bottom: 0px;
    background: white;
    width: 100%;
    height: 100rpx;
    justify-content: center;
    align-items: center;
}

button {
    background: #fe6630;
    border: none;
}

.swiper {
  height: 540rpx;
}

.call-item {
  display: flex;
  flex-direction: column;
  width: 9%;
  height: 80rpx;
  justify-content: space-between;
  align-items: center;
}

.last {
  margin-top :20rpx;
  margin-bottom: 120rpx;
  background: white;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

</style>
